<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{num}}----<button @click="num++">点击</button></p>
        <aaa></aaa>
    </div>
</body>
<script>

    /* 
    provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙组件的 property。
    用法1:
    provide:{
        // count 依赖注入的属性名   依赖注入的属性值 "100"
        count:"100" 
    } 
    用法2:
    provide:function(){
        // this 当前实例
        return {
            // count 依赖注入的属性名   依赖注入的属性值 "100" this.num
            count: this.num,
        }
    }
    


    inject 选项应该是：
        一个字符串数组，或
        一个对象，对象的 key 是本地的绑定名，value 是：
            在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
            一个对象，该对象的：
            from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
            default property 是降级情况下使用的 value

    用法1: 
        inject:["count"],

    用法2: 
        inject:{
            count:{
                default:100
            }
        }

        inject:{
            count:{
                from:"count",     //把接收的值赋值给变量count  this.count = 接收的数据  
                default:100
            }

            num:{
                from:"count",    // 自定义变量名=> 接收的值赋值给变量num  this.num =  接收的数据    
                default:100
            }
        }

    */



    // 需求: 想把num -> 传递给aaa->bbb->comp-test
    Vue.component("comp-test", {
        data() {
            return {

            }
        },
        template: `<div>这是comp-test组件{{count}}----{{test}}</div>`,
        // inject: ["count"],
        inject: {
            count: {
                // from: "count",
                default: 100
            },
            test: {
                from: "num",   // test = num
            }
        }
    })


    Vue.component("bbb", {
        data() {
            return {}
        },
        template: `
            <div>
                <h4>这是bbb组件:{{count}}</h4>
                <comp-test></comp-test>
            </div>
        `,
        inject: ["count"],
    })
    Vue.component("aaa", {
        data() {
            return {}
        },
        template: `<div>
            <h3>这是aaaa组件</h3>
            <bbb></bbb>
        </div>`,
        provide: {
            num: 1000,
        }
    })




    var vm = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        // provide: {
        //     // 注入的属性名,注入的属性值
        //     count: 1,   //死数据
        // }

        provide: function () {
            console.log("this", this.num);
            return {
                count: this.num  // count 依赖于this.num => 1
                // count: () => this.num;  // count方法 依赖于num  => count()    
            }
        }
    })



</script>

</html>